<template>
  <ElCard header="脏器功能">
    <ElForm :model="formModel" ref="formRef" :show-message="false"  size="small">
      <CardBox header="口腔">
        <ElFormItem label="口唇" prop="a00_04_53">
          <ElRadioGroup v-model="formModel.a00_04_53">
            <ElRadio
              v-for="(value, key) in formSource.a00_04_53"
              :key="key"
              :label="key"
            >{{ value }}</ElRadio>
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem label="齿列" style="width: 100%">
          <table>
            <tr>
              <td colspan="3">
                <ElCheckbox
                  v-model="formModel.a00_04_54"
                  label="1"
                  true-label="1"
                  false-label=""
                  @change="handleChiChange($event, 'a00_04_54')"
                  >正常
                </ElCheckbox>
              </td>
            </tr>
            <tr>
              <td>
                <ElCheckbox
                  v-model="formModel.a00_04_55"
                  @change="handleChiChange($event, 'a00_04_55')"
                  label="2"
                  true-label="2"
                  false-label=""
                  >缺齿
                </ElCheckbox>
              </td>
              <td>
                <ElLink>全</ElLink>
              </td>
              <td>
                <table class="tooth-list">
                  <tr>
                    <td>
                      <ElCheckboxGroup
                        v-model="formModel.a00_04_193_1"
                        :disabled="formDisable.a00_04_193_1"
                      >
                        <ElCheckboxButton
                          size="small"
                          v-for="value in Object.keys(
                            formSource.a00_04_193_1
                          ).reverse()"
                          :label="value"
                          :value="value"
                          :key="value"
                        />
                      </ElCheckboxGroup>
                    </td>
                    <td>
                      <ElCheckboxGroup
                        v-model="formModel.a00_04_193_2"
                        :disabled="formDisable.a00_04_193_2"
                      >
                        <ElCheckboxButton
                          v-for="value in formSource.a00_04_193_1"
                          :label="value"
                          :value="value"
                          :key="value"
                        />
                      </ElCheckboxGroup>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <ElCheckboxGroup
                        v-model="formModel.a00_04_193_3"
                        :disabled="formDisable.a00_04_193_3"
                      >
                        <ElCheckboxButton
                          size="small"
                          v-for="value in Object.keys(
                            formSource.a00_04_193_1
                          ).reverse()"
                          :label="value"
                          :value="value"
                          :key="value"
                        />
                      </ElCheckboxGroup>
                    </td>
                    <td>
                      <ElCheckboxGroup
                        v-model="formModel.a00_04_193_4"
                        :disabled="formDisable.a00_04_193_4"
                        @change="handleQCChange($event, '4')"
                      >
                        <ElCheckboxButton
                          v-for="value in formSource.a00_04_193_1"
                          :label="value"
                          :value="value"
                          :key="value"
                        />
                      </ElCheckboxGroup>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td>
                <ElCheckbox
                  v-model="formModel.a00_04_56"
                  label="3"
                  true-label="3"
                  false-label=""
                  @change="handleChiChange($event, 'a00_04_56')"
                  >龋齿
                </ElCheckbox>
              </td>
              <td>
                <ElLink>全</ElLink>
              </td>
              <td>
                <table class="tooth-list">
                  <tr>
                    <td>
                      <ElCheckboxGroup
                        v-model="formModel.a00_04_194_1"
                        :disabled="formDisable.a00_04_194_1"
                      >
                        <ElCheckboxButton
                          size="small"
                          v-for="value in Object.keys(
                            formSource.a00_04_193_1
                          ).reverse()"
                          :label="value"
                          :value="value"
                          :key="value"
                        />
                      </ElCheckboxGroup>
                    </td>
                    <td>
                      <ElCheckboxGroup
                        v-model="formModel.a00_04_194_2"
                        :disabled="formDisable.a00_04_194_2"
                      >
                        <ElCheckboxButton
                          v-for="value in formSource.a00_04_193_1"
                          :label="value"
                          :value="value"
                          :key="value"
                        />
                      </ElCheckboxGroup>
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <ElCheckboxGroup
                        v-model="formModel.a00_04_194_3"
                        :disabled="formDisable.a00_04_194_3"
                      >
                        <ElCheckboxButton
                          size="small"
                          v-for="value in Object.keys(
                            formSource.a00_04_193_1
                          ).reverse()"
                          :label="value"
                          :value="value"
                          :key="value"
                        />
                      </ElCheckboxGroup>
                    </td>
                    <td>
                      <ElCheckboxGroup
                        v-model="formModel.a00_04_194_4"
                        :disabled="formDisable.a00_04_194_4"
                      >
                        <ElCheckboxButton
                          v-for="value in formSource.a00_04_193_1"
                          :label="value"
                          :value="value"
                          :key="value"
                        />
                      </ElCheckboxGroup>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td>
                <ElCheckbox
                  v-model="formModel.a00_04_57"
                  true-label="4"
                  false-label=""
                  @change="handleChiChange($event, 'a00_04_57')"
                  :disabled="formDisable.a00_04_57"
                  >义齿
                </ElCheckbox>
              </td>
              <td>
                <ElLink>全</ElLink>
              </td>
              <td>
                <table class="tooth-list">
                  <tr>
                    <td>
                      <ElCheckboxGroup
                        v-model="formModel.a00_04_195_1"
                        :disabled="formDisable.a00_04_195_1"
                      >
                        <ElCheckboxButton
                          size="small"
                          :disabled="!formModel.a00_04_193_1?.includes(value)"
                          v-for="value in Object.keys(
                            formSource.a00_04_193_1
                          ).reverse()"
                          :label="value"
                          :value="value"
                          :key="value"
                        />
                      </ElCheckboxGroup>
                    </td>
                    <td>
                      <ElCheckboxGroup
                        v-model="formModel.a00_04_195_2"
                        :disabled="formDisable.a00_04_195_2"
                      >
                        <ElCheckboxButton
                          v-for="value in formSource.a00_04_193_1"
                          :disabled="!formModel.a00_04_193_2?.includes(value)"
                          :label="value"
                          :value="value"
                          :key="value"
                        />
                      </ElCheckboxGroup>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <ElCheckboxGroup
                        v-model="formModel.a00_04_195_3"
                        :disabled="formDisable.a00_04_195_3"
                      >
                        <ElCheckboxButton
                          size="small"
                          :disabled="!formModel.a00_04_193_3?.includes(value)"
                          v-for="value in Object.keys(
                            formSource.a00_04_193_1
                          ).reverse()"
                          :label="value"
                          :value="value"
                          :key="value"
                        />
                      </ElCheckboxGroup>
                    </td>
                    <td>
                      <ElCheckboxGroup
                        v-model="formModel.a00_04_195_4"
                        :disabled="formDisable.a00_04_195_4"
                      >
                        <ElCheckboxButton
                          v-for="value in formSource.a00_04_193_1"
                          :disabled="!formModel.a00_04_193_4?.includes(value)"
                          :label="value"
                          :value="value"
                          :key="value"
                        />
                      </ElCheckboxGroup>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </ElFormItem>
        <ElFormItem label="咽部">
          <ElRadioGroup v-model="formModel.a00_04_58">
            <ElRadio
              v-for="(value, key) in formSource.a00_04_58"
              :label="key"
              :key="key"
              >{{ value }}</ElRadio
            >
          </ElRadioGroup>
        </ElFormItem>
      </CardBox>
      <br />
      <CardBox header="视力">
        <ElFormItem label="左眼" prop="a00_04_59">
          <ElInput style="width: 60px" v-model="formModel.a00_04_59" />
        </ElFormItem>
        <ElFormItem label="右眼" prop="a00_04_60">
          <ElInput style="width: 60px" v-model="formModel.a00_04_60" />
        </ElFormItem>
        <ElFormItem label="矫正视力">
          <ElFormItem label="左眼" prop="a00_04_61">
            <ElInput style="width: 60px" v-model="formModel.a00_04_61" />
          </ElFormItem>
          <ElFormItem label="右眼" prop="a00_04_62">
            <ElInput style="width: 60px" v-model="formModel.a00_04_62" />
          </ElFormItem>
        </ElFormItem>
      </CardBox>
      <br />
      <CardBox header="听力">
        <ElFormItem prop="a00_04_63">
          <ElRadioGroup v-model="formModel.a00_04_63">
            <ElRadio
              v-for="(value, key) in formSource.a00_04_63"
              :label="key"
              :key="key"
              >{{ value }}</ElRadio
            >
          </ElRadioGroup>
        </ElFormItem>
      </CardBox>
    </ElForm>
  </ElCard>
</template>

<script lang="ts" setup>
import { computed, reactive, ref, toRaw, watch } from "vue";
import { IOrganFunction } from "@/model";
import { tjwx } from "@/dict";
import { ElForm } from "element-plus";
import { cloneDeep } from "lodash-es";

const props = defineProps<{
  organFunction: Partial<IOrganFunction>;
}>();
const formSource = reactive(tjwx);
const formModel = ref(cloneDeep(props.organFunction));
// watch(()=>{
//   return props.organFunction
// },(val)=>{
//   formModel.value =val
// })

const formDisable = computed(() => {
  return {
    //职业病危害因素接触史
    a00_04_193_1: !formModel.value.a00_04_55,
    a00_04_193_2: !formModel.value.a00_04_55,
    a00_04_193_3: !formModel.value.a00_04_55,
    a00_04_193_4: !formModel.value.a00_04_55,
    a00_04_194_1: !formModel.value.a00_04_56,
    a00_04_194_2: !formModel.value.a00_04_56,
    a00_04_194_3: !formModel.value.a00_04_56,
    a00_04_194_4: !formModel.value.a00_04_56,
    a00_04_195_1: !formModel.value.a00_04_57,
    a00_04_195_2: !formModel.value.a00_04_57,
    a00_04_195_3: !formModel.value.a00_04_57,
    a00_04_195_4: !formModel.value.a00_04_57,
    a00_04_57: !formModel.value.a00_04_55,
  };
});

const formRef = ref<InstanceType<typeof ElForm>>();

const handleChiChange = (data, key) => {
  console.log(data, key);
  //齿列 正常  有问题逻辑
  if (key === "a00_04_55" || key === "a00_04_56" || key === "a00_04_57") {
    if (data !== "") {
      formModel.value.a00_04_54 = "";
    }
  }
  if (key === "a00_04_54") {
    if (data !== "") {
      formModel.value.a00_04_55 = "";
      formModel.value.a00_04_56 = "";
      formModel.value.a00_04_57 = "";
      for (let i = 1; i <= 4; i++) {
        formModel["a00_04_193_" + i] = [];
        formModel["a00_04_194_" + i] = [];
        formModel["a00_04_195_" + i] = [];
      }
    }
  }

  if (key === "a00_04_55") {
    if (data === "") {
      formModel.value.a00_04_57 = "";
      //把子项置空
      for (let i = 1; i <= 4; i++) {
        formModel["a00_04_193_" + i] = [];
      }
    }
  }

  if (key === "a00_04_56") {
    if (data === "") {
      //把子项置空
      for (let i = 1; i <= 4; i++) {
        formModel["a00_04_194_" + i] = [];
      }
    }
  }
  if (key === "a00_04_57") {
    if (data === "") {
      //把子项置空
      for (let i = 1; i <= 4; i++) {
        formModel["a00_04_195_" + i] = [];
      }
    }
  }
};
/** 缺齿的逻辑*/
const handleQCChange = (data, key) => {
  console.log(data, key);
  if (
    formModel["a00_04_195_" + key] &&
    formModel["a00_04_195_" + key].length > 0
  ) {
    formModel["a00_04_195_" + key] = formModel["a00_04_195_" + key].filter(
      (item) => {
        return data.includes(item);
      }
    );
  }
};
const validateForm = () => {
  return formRef.value?.validate();
};

const getData = () => {
  return toRaw(formModel.value);
};

defineExpose({ validateForm, getData });
</script>

<style scoped></style>
